<template>
  <view class="order-detail-wrap" v-if="orderInfo" >
    <!--  订单状态  -->
    <view class="status">
      <view class="iconfont icon-dingdanzhuangtai status__label" ></view>
      <view class="status__desc" >
        <text>{{ orderInfo.status | statusValueFilter }}</text>
        <view class="clock-line" v-if="orderInfo.end_time > 0 && orderInfo.status === 0" >
          <countDown
          :format="orderInfo.end_time > 1000 * 60 * 60 * 24 ? 'DD天HH:mm:ss' : 'HH:mm:ss'"
          suffix="后结束"
          :time="orderInfo.end_time"></countDown>
        </view>
      </view>
    </view>
    <!--  地址  -->
    <div class="address" :style="'background: url(' + addressBg + ') no-repeat left bottom;'" >
        <div class="address__content">收货地址： 
          <div class="address__user">
            <span class="address__user-name">{{ orderInfo.buyer_name }}</span>
            <span class="address__user-mobile">{{ orderInfo.buyer_phone }}</span>
          </div>
          <div class="address__info">
           {{ orderInfo.region }}{{ orderInfo.address }}
          </div>
        </div>
    </div>
    <div class="address" :style="'background: url(' + addressBg + ') no-repeat left bottom;'" >
         <view class="merber__time createTime">
            订单创建时间：{{ orderInfo.created_at }}
          </view>
    </div>
    <!-- 商品信息 -->
    <view class="list">
      <view
      class="item" v-for="(img,idx) in orderInfo.item_list" :key="idx" >
        <view class="merber">
          <image class="merber__img" :src="orderIcon"></image>
          <view class="merber__desc">
            <view class="name">{{ orderInfo.buyer_name }}</view>
          </view>
        </view>
        <view class="info">
          <image
            class="info__img"
            :src="img.item_pic"
          ></image>
          <view class="info__desc" >
            <view class="name" >{{ img.item_name }}</view>
            <view class="sku" >{{ img.sku }}</view>
            <view class="price" >
              <text>¥{{ img.price }} x {{img.item_cnt}}</text>
            </view>
            <view class="price" >
              <text>编号：{{ img.item_id }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view  class="item" v-if="orderInfo.tickets_url!=undefined" @tap="handleToViewTickets(orderInfo)">
      <view class="count-line tickets">
          <text>平台分享双色球，点击查看是否中奖</text>
        </view>
      <view class="count-line">
          <text>合计金额：</text>
          <text class="price" >¥{{orderInfo.price/100 }}</text>
        </view>
      </view>
    </view>

    <!--  订单信息  -->
    <view class="order">
        <view class="order__content">
          <view class="order__cell">
            <text>订单编号：{{ orderInfo.order_sn }}</text>
            <text
              class="order__cell-action order__cell-action--primary"
              @click="handleCopy(orderInfo.order_sn)"
            >
              复制
            </text>
          </view>
         <!--  <view class="order__cell">创建时间：{{ orderInfo.created_at }}</view> -->
          <!-- <view class="order__cell">配送时间：预计{{ orderInfo.distribution_time }}送达</view> -->
        </view>
    </view>

    <button
      v-if="orderInfo.status === 0"
      class="pp-button panel__btn pay-btn-max panel__btn--primary"
      hover-class="pp-button--active"
      @tap="handleToPay"
    >
      继续付款
    </button>

    <!-- 操作 -->
    <view class="panel" v-if="orderInfo.status === 1 || orderInfo.status === 0 ||orderInfo.status === 3 || orderInfo.status === 30" >
        <!-- 拼团中,  退单 -->
          <button
            v-if="orderInfo.status === 1 || orderInfo.status === 0"
            class="pp-button panel__btn panel__btn--normal"
            hover-class="pp-button--active"
            @click="handleDelOrder"
          >
            取消订单
          </button>

          <button  v-if="orderInfo.status === 3 || orderInfo.status === 30"
            class="pp-button panel__btn panel__btn--primary"
            hover-class="pp-button--active"
            @tap="handleToCreatOrder"
          >
            再来一单
          </button>
    </view>
  </view>
</template>

<script>
  import { addressBg, orderIcon } from '@/tool/static-img';
  import countDown from '@/basic-components/u-count-down/index.vue';
  import {ORDER_CANCEL, PAY_SIGN ,ORDER_DETAIL} from '@/api/order';
  import { momentDate, copyFunc } from '@/tool';
  export default {
    components: {
      countDown
    },
    data() {
      return {
        addressBg,
        orderIcon,
        id: '',
        orderInfo: null
      }
    },
    onLoad({ id }) {
      this.id = id;
      this.getOrderDetail(id);
    },
    filters: {
      statusValueFilter(val) {
        const statusObj = {
          0: '待付款',
          1: '待发货',
          2: '待收货',
          3: '已完成',
          4: '已取消',
          10: '已发货',
          20: '已签收',
          30: '已退款'
        }

        return statusObj[val]
      }
    },
    methods: {
      getOrderDetail(id) {
        this.$http.get(`${ORDER_DETAIL}/${id}`)
          .then(res => {
            this.orderInfo = res.data;
            this.orderInfo.created_at = momentDate(res.data.created_at, 'YYYY-MM-DD HH:mm');
           // this.orderInfo.item_thumb = this.orderInfo.item_thumb.split(',')[0]
            this.orderInfo.distribution_time = momentDate(res.data.distribution_time, 'MM月DD日')
          })
      },
      handleToViewTickets(item){
        let imgCoverList= []
        imgCoverList.push(item.tickets_url);
          uni.previewImage({
            current: 0,
            urls: imgCoverList,
          });
      },
      handleCopy(orderId) {
        // 订单号复制
        copyFunc(String(orderId));
      },
      handleDelOrder() {
        // 删除订单
        uni.showModal({
          content: '确认取消订单?',
          confirmText: '确认',
          success: res => {
            if (res.confirm) {
               this.cancelOrder()
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          },
        });
      },
      getPaymentSign(sn) {
        // PAY_SIGN
        return this.$http.put(PAY_SIGN, {
          id: this.id
        })
      },
      async handleToPay() {
        uni.showToast({
          title: '请求中...',
          mask: true,
          icon: 'loading',
          duration: 300000,
        });
        try{
          const entry = await this.getPaymentSign();
          const {
            data
          } = entry;
          uni.requestPayment({
            timeStamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
            package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
            signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: data.paySign,
            success: res => {
              uni.hideToast();
              if (res.errMsg === 'requestPayment:ok') {
                uni.showToast({
                  title: '支付成功',
                  icon: 'success',
                });
                this.getOrderDetail(this.id);
              }
            },
            fail: () => {
              uni.hideToast();
            },
          });

        }catch(e){
          uni.hideToast();
        }
      },
      cancelOrder() {
        this.$http.put(ORDER_CANCEL, {
          id: this.id,
          status: 30
        })
        .then(() => {
          uni.showToast({
            title: '取消成功',
            icon: 'success',
          });
          this.getOrderDetail(this.id);
        })
      },
      async handleToCreatOrder() {
        // 再来一单
        this.$navigate({
          page: 'confirmOrder',
          params: {
            goodId: this.orderInfo.item_id,
            addressId: this.orderInfo.delivery_id
          }
        })
      }
    }
  }
</script>

<style lang="less" >
  .order-detail-wrap{
    position: relative;
    min-height: 100vh;
    padding-bottom: 150rpx;
    padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    .status {
      display: flex;
      width: 100%;
      height: 196rpx;
      padding: 50rpx 36rpx;
      background: #fedd00;
      &__label{
        font-size: 44rpx;
        margin-top: -2rpx;
      }
      &__desc{
        display: flex;
        font-size: 34rpx;
        margin-left: 10rpx;
      }
    }
    .clock-line{
      margin-left: 10rpx;
      padding-top: 4rpx;
    }
    .address {
      width: 710rpx;
      border-radius: 20rpx;
      margin: auto;
      margin-top: -48rpx;
      margin-bottom: 24rpx;
      background-color: #ffffff !important;
      background-size: 100% !important;
      &__content {
        padding: 40rpx 36rpx;
      }
      &__user {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        &-name,
        &-mobile {
          font-size: 32rpx;
          font-weight: 500;
        }
        &-name {
          margin-right: 48rpx;
        }
      }
      &__info {
        max-width: 508rpx;
        line-height: 40rpx;
      }
    }
    .list {
      display: inline;
      .item {
        position: relative;
        width: 710rpx;
        padding: 36rpx 24rpx;
        margin: auto;
       // margin-bottom: 20rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        .merber {
          display: flex;
          align-items: center;
          margin-bottom: 30rpx;
          &__img {
            flex-shrink: 0;
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 16rpx;
          }
          &__desc {
            flex: 1;
            display: flex;
            .name {
              font-size: 30rpx;
            }
          }
          .status{
            font-size: 28rpx;
            flex-shrink: 0;
            margin-right: 10rpx;
            color: #FF6034;
          }
        }
        .title {
          font-size: 32rpx;
          font-weight: 500;
          padding: 20rpx 0;
        }
        .info {
          display: flex;
          padding: 20rpx 0;
          padding-top: 0;
          border-bottom: 1px solid #f5f5f5;
          &__img {
            flex-shrink: 0;
            width: 180rpx;
            height: 180rpx;
            margin-right: 20rpx;
            border-radius: 20rpx;
          }
          &__desc{
            flex: 1;
            .name{
              height: 96rpx;
              font-size: 32rpx;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              word-wrap: break-word;
              white-space: normal !important;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .sku{
              font-size: 24rpx;
              color: #999999;
            }
            .price{
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              padding-top: 20rpx;
              font-size: 26rpx;
            }
          }
        }
        .count-line {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 28rpx;
          .price {
            font-size: 28rpx;
            font-weight: 500;
            color: #ff0000;
          }
        }
      }
    }
    .tickets{
      float: left;
      color: red;
      font-size: 30rpx;
    }
    .order {
      width: 710rpx;
      margin: auto;
      border-radius: 20rpx;
      background: #fff;
      &__content {
        padding: 32rpx 24rpx 32rpx 32rpx;
      }
      &__cell {
        font-size: 30rpx;
        line-height: 42rpx;
        margin-bottom: 16rpx;
        color: #494949;
        &:last-child {
          margin-bottom: 0;
        }
        &-action {
          font-size: 26rpx;
          margin-left: 12rpx;
          &--primary {
            color: #ff6034;
          }
          &--normal {
            color: #999;
          }
        }
      }
    }
    .panel{
      position: fixed;
      left: 0;
      bottom: 0;
      bottom: calc(constant(safe-area-inset-bottom));
      bottom: calc(env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      height: 136rpx;
      padding: 0 24rpx;
      background-color: #FFFFFF;
      &__btn{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 232rpx;
        height: 92rpx;
        margin-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        &--normal{
          background-color: transparent;
          border:1px solid #ababab;
        }
        &--primary{
          background-color: #FEDD00;
        }
      }
    }

    .pay-btn-max{
      width: 710rpx;
      margin-top: 40rpx;
      margin-bottom: 60rpx;
    }
    .createTime{
      padding-bottom: 30rpx;
      margin-left: 30rpx;
    }
  }
</style>
